<template>
  <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="产品名称">
          <el-input v-model="formInline.productName" placeholder="产品名称"></el-input>
        </el-form-item>
       <el-form-item label="产品编号">
         <el-input v-model="formInline.prodcutId" placeholder="产品编号"></el-input>
       </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="dataList.slice((currentPage-1)*pagesize,currentPage*pagesize)" border style="width: 100%">
        <el-table-column prop="date" label="编号" style="width:150px">
        </el-table-column>
        <el-table-column prop="name" label="产品名称" style="width:150px">
        </el-table-column>
        <el-table-column prop="province" label="用途类型" style="width:150px">
        </el-table-column>
        <el-table-column prop="city" label="审核状态" style="width:150px">
        </el-table-column>
        <el-table-column prop="address" label="创建人" style="width:150px">
        </el-table-column>
        <el-table-column prop="zip" label="添加时间" style="width:150px">
        </el-table-column>
        <el-table-column label="操作" style="width:150px">
          <template slot-scope="scope">
            <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查询详情</el-button> -->
            <el-button type="text" @click="dialogTableVisible = true">修改</el-button>
             <el-button type="text" @click="dialogTableVisible = true">删除</el-button>

          </template>

        </el-table-column>
      </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="this.currentPage"
        :page-sizes="[5, 10, 15]" :page-size="this.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>

  </div>
</template>
<script>
     export default {
       computed: {
         total() { //返回信息的条数
           return this.dataList.length
         }
       },
        data() {
          return {
              /* start----分页有关数据,利用计算属性，返回总记录数（total） */
              pagesize: 5,
              currentPage: 1,
              /* end----分页有关数据 */
            formInline: {
              productName: '',
              prodcutId: ''
            },
            dataList: [{
                date: '561265876245',
                name: '戴尔',
                province: '产品',
                city: '未通过',
                address: '张三',
                zip: '2019-5-6'

              }],
          }

        },
        methods: {
          //当每页显示数据的条数发生变化时
          handleSizeChange: function(val) {
            this.pagesize = val
          },
          //当页码进行切换时
          handleCurrentChange: function(currentPage) {
            this.currentPage = currentPage;
          },
          onSubmit() {
            console.log('submit!');
          }
        }
      }
</script>
<style>
.el-pagination {
    text-align: center;
  }
</style>
